<script setup>
import { ref, nextTick } from 'vue'
import { useRouter } from 'vue-router'

const loadingRef = ref(null)
const router = useRouter()

// hoem.vue 的背景色
const homeBg = 'linear-gradient(120deg, #e9edf1 0%, #bdbdbd 100%)'
// 你原本的 loading 背景色
const loadingBg = 'radial-gradient(circle at 50% 50%, #e9edf1 0%, #f6f7fb 60%, #d3d6db 100%)'

router.beforeEach((to, from, next) => {
  if (loadingRef.value) {
    loadingRef.value.backgroundColor = loadingBg
    loadingRef.value.visible = true
  }
  next()
})

router.afterEach((to) => {
  // 目标页面是 home 时，渐变到 homeBg
  if (loadingRef.value) {
    loadingRef.value.backgroundColor = homeBg
    setTimeout(() => {
      loadingRef.value.visible = false
    }, 700) // 渐变时间与CSS一致
  }
})
</script>

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
body.dark-theme,
body.dark-theme .el-main,
body.dark-theme .el-header,
body.dark-theme .stat-title,
body.dark-theme .stat-value,
body.dark-theme .vertical-text,
body.dark-theme .vertical-article,
body.dark-theme .timeline-link {
  color: #eee !important;
}
body.dark-theme .vertical-article.active {
  background: #2a2d32 !important;
}
body.dark-theme .el-card,
body.dark-theme .stat-card {
  background: #23272e !important;
  color: #eee !important;
}
body.dark-theme .timeline-link:hover {
  color: #ffd700 !important;
}
body.dark-theme .common-layout {
  background: linear-gradient(120deg, #23272e 0%, #444950 100%) !important;
}
body.dark-theme {
  background: #23272e !important;
}
</style>